<template>
  <div style="margin-right: 8px;margin-left: 8px">
    <h2 style="color: #0352f1">知识库</h2>
    <el-row :gutter="20">
      <el-col :span="3" v-for="(news, index) in newsItems" :key="index">
        <el-card class="el-card-setting" shadow="always" :body-style="{ padding: '0px' }">
          <img :src="news.image" class="image" style="width: 150px; height: 150px;" alt="no img"/>
          <div style="padding: 14px;">
            <span>{{ news.title }}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>

import {ref} from "vue";

let newsItems = ref([
  {title: 'KubeCtl', image: '/logo/k8s.png'},
  {title: 'Docker', image: '/logo/docker.png'},
  {title: 'nodejs', image: '/logo/nodejs.png'},
  {title: 'Spring CLoud', image: '/logo/springcloud.png'},
  {title: 'dubbo', image: '/logo/dubbo.png'},
  {title: 'redis', image: '/logo/redis.png'},
  {title: 'kafka', image: '/logo/kafka.png'},
  {title: 'Spring', image: '/logo/spring.png'},
  // 更多新闻...
]);

</script>

<style scoped>
.el-card-setting{
  background-color: transparent;
}
</style>
